<template>
  <div class="my-container">
    <el-row>
      <el-col :span="6">
        <project-card class="user-card" :features="featureData"></project-card>
      </el-col>
      <el-col :span="18">
        <el-tabs :v-model="activeName">
          <el-tab-pane :label="$t('profile.feature')" name="feature">
            <feature :features="featureData" />
          </el-tab-pane>
          <el-tab-pane :label="$t('profile.chapter')" name="chapter">
            <chapter />
          </el-tab-pane>
          <el-tab-pane :label="$t('profile.author')" name="author">
            <author />
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import author from './components/author.vue'
import chapter from './components/chapter.vue'
import feature from './components/feature.vue'
import ProjectCard from './components/ProjectCard.vue'
import { getFeature } from '@/api/user'
import { watchSwitchLang } from '@/utils/i18n'
const activeName = ref('feature')
const featureData = ref([])
const getFeatureData = async () => {
  featureData.value = await getFeature()
}

getFeatureData()
watchSwitchLang(getFeatureData)
</script>

<style lang="scss" scoped>
.my-container {
  .user-card {
    margin-right: 20px;
  }
}
</style>
